<template>
<div>
  <el-container style="height: 100%; border: 1px solid #eee">

    <el-container>
      <el-header style="text-align: left; font-size: 12px">
        <el-select  style="width:130px"  size="small"  v-model="collegeID" clearable placeholder="请选择学院"   @change="selectByCollege">
          <el-option
              v-for="(item,idx) in colleges"
              :key="idx"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select  style="width:130px"  size="small" v-model="majorID" clearable placeholder="请选择专业"   @change="selectByMajor">
          <el-option
              v-for="(item,idx) in majors"
              :key="idx"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
          <el-select  style="width:130px" size="small" v-model="classID" clearable placeholder="请选择班级"   @change="searchStudent">
        <el-option
            v-for="(item,idx) in classes"
            :key="idx"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
        <el-select  style="width:130px"  size="small"  v-model="areaID" clearable placeholder="请选择园区"   @change="selectByArea">
          <el-option
              v-for="(item,idx) in areas"
              :key="idx"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select  style="width:130px"  size="small"  v-model="buildingID" clearable placeholder="请选择楼栋"   >
          <el-option
              v-for="(item,idx) in buildings"
              :key="idx"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" style="margin-left: 100px"  @click="batchAllocationWithNation">批量排宿（民族）</el-button>
        <el-button type="primary" size="small" style="margin-left: 19px" @click="batchAllocationWithBirthplace">批量排宿（生源地）</el-button>
      </el-header>

      <el-main>
        <el-table :data="tableData" height="575"
                  @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="50">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="150">
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="100">
          </el-table-column>
          <el-table-column prop="nation" label="民族" width="150">
          </el-table-column>
          <el-table-column prop="birthplace" label="生源地" width="150">
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5,10,15]"
            :current-page="pageNo"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-main>
      <el-footer>
        <div class="block">

        </div>
      </el-footer>
    </el-container>
  </el-container>
</div>
</template>

<script>
// import {} from'../../../../../api/leader'

import {
  _batchAllocationWithBirthplace,
  _batchAllocationWithNation,
  _loadAreas, _loadBuildings,
  _loadClasses,
  _loadColleges,
  _loadMajors, _searchStudentByCollegeIDMajorIDClassID

} from '../../../../../api/leader'

export default {
  data () {
    return {
      multipleSelection: [],
      value: '',
      pageSize: 10,
      pageNo: 1,
      collegeID: null,
      collegeName: '',
      majorID: null,
      majorName: '',
      classID: null,
      className: '',
      areaID: null,
      areaName: '',
      buildingID: null,
      buildingName: '',
      colleges: [],
      majors: [],
      classes: [],
      areas: [],
      buildings: [],
      students: [],
      collegesInput: '',
      majorsInput: '',
      classesInput: '',
      areasInput: '',
      buildingsInput: '',
      timeout: null,
      tableData: []
    }
  },
  methods: {
    searchStudent () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: 1,
        data: {
          CollegeID: this.collegeID,
          MajorID: this.majorID,
          ClassID: this.classID,
          OwningRoom: 0
        }
      }
      _searchStudentByCollegeIDMajorIDClassID(DOT).then(res => {
        if (res.status) {
          this.tableData = res.data
        }
      })
    },
    batchAllocationWithNation () {
      if (this.buildingID === null) {
        this.$message({
          message: '必须选择入住的楼栋',
          type: 'error'
        })
        return
      }
      const OBJ = {
        LeaderID: JSON.parse(localStorage.getItem('user')).id,
        students: this.multipleSelection,
        BuildingID: this.buildingID
      }
      _batchAllocationWithNation(OBJ).then(res => {
        if (res.status) {
          this.$message({
            message: '批量排宿成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '批量排宿失败',
            type: 'error'
          })
        }
      })
    },
    batchAllocationWithBirthplace () {
      if (this.buildingID === null) {
        this.$message({
          message: '必须选择入住的楼栋',
          type: 'error'
        })
        return
      }
      const OBJ = {
        LeaderID: JSON.parse(localStorage.getItem('user')).id,
        students: this.multipleSelection,
        BuildingID: this.buildingID
      }
      _batchAllocationWithBirthplace(OBJ).then(res => {
        if (res.status) {
          this.$message({
            message: '批量排宿成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '批量排宿失败',
            type: 'error'
          })
        }
      })
    },
    selectByArea () {
      _loadBuildings(this.areaID).then(res => {
        if (res.status) {
          this.buildings = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    async selectByCollege () {
      await _loadMajors(this.collegeID).then(res => {
        if (res.status) {
          this.majors = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.searchStudent()
    },
    async selectByMajor () {
      await _loadClasses(this.majorID).then(res => {
        if (res.status) {
          this.classes = res.data
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.searchStudent()
    },
    // getArea().then(res => {
    //   this.tableData = res.data
    // }),
    loadMajors () {
      _loadMajors(this.collegeID).then(res => {
        this.majors = res.data
      })
    },
    loadClasses () {
      _loadClasses(this.majorName).then(res => {
        this.classes = res.data
      })
    },
    loadBuildings () {
      _loadBuildings(this.areaName).then(res => {
        this.buildings = res.data
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    // handleSelectCollege (queryString) {
    //   // 更新选中项到数据属性
    //   this.collegesInput = queryString
    //   // 添加一个函数selectByCollege，传给后端collegeName，返回一个学生列表
    //   const DOT = {
    //     pageSize: this.pageSize,
    //     pageNo: this.pageNo,
    //     data: {
    //       collegeName: this.collegesInput
    //     }
    //   }
    //   selectByCollege(DOT).then(res => {
    //     if (res.status) {
    //       this.students = res.data
    //       this.total = res.data.total
    //     }
    //   })
    // },
    // handleSelectMajor (queryString) {
    //   // 更新选中项到数据属性
    //   this.majorsInput = queryString
    //   // 添加一个函数selectByMajor，传给后端majorName，返回一个学生列表
    //   const DOT = {
    //     pageSize: this.pageSize,
    //     pageNo: this.pageNo,
    //     data: {
    //       collegeName: this.collegesInput,
    //       majorName: this.majorsInput
    //     }
    //   }
    //   selectByMajor(DOT).then(res => {
    //     if (res.status) {
    //       this.students = res.data
    //       this.total = res.data.total
    //     }
    //   })
    // },
    // handleSelectClass (queryString) {
    //   // 更新选中项到数据属性
    //   this.classesInput = queryString
    //   // 添加一个函数selectByClass，传给后端className，返回一个学生列表
    //   const DOT = {
    //     pageSize: this.pageSize,
    //     pageNo: this.pageNo,
    //     data: {
    //       collegeName: this.collegesInput,
    //       majorName: this.majorsInput,
    //       className: this.classesInput
    //     }
    //   }
    //   selectByClass(DOT).then(res => {
    //     if (res.status) {
    //       this.students = res.data
    //       this.total = res.data.total
    //     }
    //   })
    // },
    // handleSelectArea (queryString) {
    //   this.areasInput = queryString
    //   const DOT = {
    //     pageSize: this.pageSize,
    //     pageNo: this.pageNo,
    //     data: {
    //       areaName: this.areasInput
    //     }
    //   }
    //   selectByArea(DOT).then(res => {
    //     if (res.status) {
    //       this.students = res.data
    //       this.total = res.data.total
    //     }
    //   })
    // },
    // handleSelectBuilding (queryString) {
    //   this.buildingsInput = queryString
    //   const DOT = {
    //     pageSize: this.pageSize,
    //     pageNo: this.pageNo,
    //     data: {
    //       areaName: this.areasInput,
    //       buildingName: this.buildingsInput
    //     }
    //   }
    //   selectByBuilding(DOT).then(res => {
    //     if (res.status) {
    //       this.students = res.data
    //       this.total = res.data.total
    //     }
    //   })
    // },
    searchStudent2 () {
      const DOT = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        data: {
          CollegeID: this.collegeName,
          MajorID: this.majorName,
          ClassID: this.className,
          OwningRoom: 0
        }
      }
      _searchStudentByCollegeIDMajorIDClassID(DOT).then(res => {
        if (res.status) {
          this.tableData = res.data
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.searchStudent2()
    },
    handleCurrentChange (val) {
      this.pageNo = val
      this.searchStudent2()
    },
    // querySearchAsync1 (queryString, cb) {
    //   var colleges = this.colleges
    //   var results = queryString ? colleges.filter(this.createStateFilter(queryString)) : colleges
    //
    //   clearTimeout(this.timeout)
    //   this.timeout = setTimeout(() => {
    //     cb(results)
    //   }, 3000 * Math.random())
    // },
    // querySearchAsync2 (queryString, cb) {
    //   var majors = this.majors
    //   var results = queryString ? majors.filter(this.createStateFilter(queryString)) : majors
    //
    //   clearTimeout(this.timeout)
    //   this.timeout = setTimeout(() => {
    //     cb(results)
    //   }, 3000 * Math.random())
    // },
    // querySearchAsync3 (queryString, cb) {
    //   var classes = this.classes
    //   var results = queryString ? classes.filter(this.createStateFilter(queryString)) : classes
    //
    //   clearTimeout(this.timeout)
    //   this.timeout = setTimeout(() => {
    //     cb(results)
    //   }, 3000 * Math.random())
    // },
    // querySearchAsync4 (queryString, cb) {
    //   var areas = this.areas
    //   var results = queryString ? areas.filter(this.createStateFilter(queryString)) : areas
    //
    //   clearTimeout(this.timeout)
    //   this.timeout = setTimeout(() => {
    //     cb(results)
    //   }, 3000 * Math.random())
    // },
    // querySearchAsync5 (queryString, cb) {
    //   var buildings = this.buildings
    //   var results = queryString ? buildings.filter(this.createStateFilter(queryString)) : buildings
    //
    //   clearTimeout(this.timeout)
    //   this.timeout = setTimeout(() => {
    //     cb(results)
    //   }, 3000 * Math.random())
    // },
    // createStateFilter (queryString) {
    //   return (state) => {
    //     return (state.value.toLowerCase().includes(queryString.toLowerCase()))
    //   }
    // },
    //
    // handleSelect (item) {
    //   console.log(item)
    // },
    async test () {
      // console.log('1111111111111111111111')
      await _loadColleges().then(res => {
        this.colleges = res.data
      })
      await _loadAreas().then(res => {
        this.areas = res.data
      })
    }
    // batchAllocationWithNation () {
    //   const DOT = {
    //     IDs: List < int > studentID,
    //     data: {
    //       areaId: this.areaID,
    //       buildingId: this.buildingID
    //     }
    //   }
    //   _batchAllocationWithNation(DOT).then(res => {
    //     if (res.status) {
    //       this.$message({
    //         message: '批量排宿成功',
    //         type: 'success'
    //       })
    //     }
    //   })
    // },
    // batchAllocationWithBirthplace () {
    //   const DOT = {
    //     IDs: List < int > studentID,
    //     data: {
    //       areaId: this.areaID,
    //       buildingId: this.buildingID
    //     }
    //   }
    //   _batchAllocationWithBirthplace(DOT).then(res => {
    //     if (res.status) {
    //       this.$message({
    //         message: '批量排宿成功',
    //         type: 'success'
    //       })
    //     }
    //   })
    // }
  },

  created () {
    this.test()
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
